<template>
  <div>
     <div class="wbody">
      <el-carousel
        class="carousel"
        :interval="4000"
        arrow="always"
        autoplay
      >
        <el-carousel-item v-for="(item, index) in images" :key="index">
          <img :src="item" class="image" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
 
</template>

<script>
import { Carousel, CarouselItem } from 'element-ui';

export default {
  components: {
    'el-carousel': Carousel,
    'el-carousel-item': CarouselItem
  },
  data() {
    return {
      images: [
        require('../../assets/111111.png'),
        require('../../assets/background.jpg'),
        require('../../assets/0zg4212000jvgf6hi037B.jpg')
      ]
    };
  }
};
</script>

<style scoped>
.wbody {
  background-color: #f3f5f6;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-radius: 5px; */
}

.carousel {
  width: 1400px;
  height: 600px;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
